<template>
	<view>
		<view style="margin-top:15rpx" class="gui-flex gui-rows gui-space-between">
			<view class="gui-text-small demo gui-color-black gui-grids-icon gui-icons"
				style="font-size: 34rpx;font-weight: bold;">&#xe64c; 待使用</view>
			<view class="gui-text-small demo ">
				<button type="default" class="gui-button gui-bg-primary gui-noborder">
					<text class="gui-icons gui-color-white gui-button-text">扫码核销</text>
				</button>
			</view>
		</view>


		

		<view class="gui-margin-top" style="margin-left: 40rpx;">
			下单时间：{{pay_time}}
		</view>
		<view class="gui-margin-top" style="margin-left: 40rpx;">
			过期时间：{{expire_day}}过期
		</view>
		

		<view class="gui-card-view gui-bg-white gui-dark-bg-level-3 gui-margin-top gui-box-shadow">

			<view class="gui-card-body gui-border-b gui-flex gui-rows gui-nowrap">
				<image mode="aspectFill"
					src="https://images.unsplash.com/photo-1663524789648-90fbdf8c8b76?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=100&q=90"
					class="gui-card-img"></image>
				<view class="gui-card-desc">
					<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
						<text class="gui-card-name gui-primary-text">助教订单1小时</text>
						<text class="gui-text-small gui-primary-color">小雪</text>
					</view>
					<text class="gui-card-text gui-block gui-secondary-text" style="margin-top:10rpx;">XX台球厅XX路店</text>
					<text class="gui-card-text gui-block gui-third-text">￥70</text>
					<text class="gui-card-text gui-block gui-third-text">数量：1</text>
				</view>
			</view>
			<view class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
				<!-- <text class="gui-icons gui-color-black gui-card-footer-item gui-border-r gui-bold">&#xe612; 申请退款</text> -->
				<!-- <text class="gui-icons gui-color-gray gui-card-footer-item gui-border-r">&#xe613; 设置</text> -->
				<text class="gui-icons gui-color-gray gui-card-footer-item">&#xe61e; 链接</text>
			</view>
		</view>

	</view>

	</view>




</template>
<script>
	export default {
		data() {
			return {
				imgUrl: "https://img0.baidu.com/it/u=3913450039,499288966&fm=253&fmt=auto&app=138&f=GIF?w=200&h=200",
				pay_time: "2024-03-13 14:00:00",
				expire_day: "2024-05-01 23:59:59",
				coupon_code: "4022 1980"
			}
		}
	}
</script>
<style scoped>
	.demo {
		width: 210rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.demo-auto-width {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 10rpx;
	}

	.gui-text-small {
		font-size: 20rpx;
	}

	/* 卡片视图 */
	.gui-card-view {
		padding: 25rpx;
		margin: 0 30rpx;
		margin-top: 30rpx;
	}

	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */
</style>